<!-- 底部按钮组件 -->
<template>
	<view class="bot_btns">
		<view class="left" :class="{'current':!current}" @click.stop="leftClick">
			<slot name="left"></slot>
		</view>
		<view class="right" :class="{'current':current}" @click.stop="rightClick">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: true
			}
		},
		methods: {
			leftClick() {
				this.$emit('buyBtn',0);
			},
			rightClick() {
				this.$emit('buyBtn',1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bot_btns {
		position: fixed;
		z-index: 9999;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10px 0px rgba(80, 80, 80, 0.0800);
		border-radius: 20px 20px 0px 0px;
		display: flex;
		justify-content: space-between;
		padding-bottom:calc(env(safe-area-inset-bottom) + 0px);
		.left,
		.right {
			text-align: center;
			width: 50%;
			padding: 18rpx 0 16rpx 0;
			color: #194FC9;
		}

		.left {
			border-radius: 20px 20px 0px 0px;
		}

		.right {
			border-radius: 0px 20px 0px 0px;
		}

		.current {
			background-color: #194FC9;
			color: white;
		}
	}
</style>
